<template>
  <div class="main">
    <div class="search">
      <div>
        <h2>值班人员</h2>
      </div>
      <div>
        <el-button type="primary" icon="el-icon-plus" @click="add">新增</el-button>
      </div>
    </div>
    <div>

    </div>
    <TableList :loading="loading" :tabledata="tableData" :params="params" :tabledatacolumn="tableDataColumn"
      @handleCurrentChange="handleCurrentChange"  @handleSizeChange="handleSizeChange" :isshow="true">
      <template v-slot:default="info">
        <el-button type="text" @click="deleteRow(info.info)">删除</el-button>
        <el-button type="text" @click="updateHandle(info.info)">修改</el-button>
      </template>
    </TableList>
    <el-dialog title="新增" :visible.sync="dialogFormVisible" width="500px" :close-on-click-modal="false">
      <el-form :model="form" ref="form" :rules="rules">
        <el-form-item label="姓名" :label-width="formLabelWidth" prop="name">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="职位" :label-width="formLabelWidth" prop="userName">
          <el-select v-model="form.job" placeholder="请选择" style="width: 80%;">
            <el-option
              v-for="item in jobOptions"
              :key="item"
              :label="item"
              :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="排班账号" :label-width="formLabelWidth" prop="userName">
          <el-select v-model="form.userName" placeholder="请选择" style="width: 80%;">
            <el-option
              v-for="item in paiBanOptions"
              :key="item"
              :label="item"
              :value="item">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div>
        PB01账号负责（值班领导、指挥中心） <br>
        PB02账号负责（指挥长、政宣助理、作战助理、信息助理）<br>
        PB03账号负责（通讯助理） <br>
        PB04账号负责（战保助理）
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="sumbit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { queryPage, addUser, delUser,updateUser } from "@/api/dutyUserApi";
import TableList from "@/components/TableList.vue";
import Search from '@/components/search.vue'
export default {
  name: "szywlist",
  components: {
    TableList,
    Search
  },
  data() {
    return {
      paiBanOptions:[
        "PB01",
        "PB02",
        "PB03",
        "PB04",
      ],
      jobOptions:[
        "值班领导",
        "指挥长",
        "指挥中心",
        "通信助理",
        "作战助理",
        "政宣助理",
        "战保助理",
        "信息助理"
      ],
      form:{
        id:'',
        name:'',
        userName:'',
        job: ''
      },
      rules:{
        name: [
            { required: true, message: '名称必填', trigger: 'blur' }
          ],
        userName: [
            { required: true, message: '值班人员必选', trigger: 'blur' }
          ],
      },
      formLabelWidth:'80px',
      dialogFormVisible:false,
      loading:true,
      options: [],
      tableData: [],
      tableDataColumn: [
        { label: "姓名", key: "name" },
        { label: "职位", key: "job" },
        { label: "排班账号", key: "userName" },
      ],
      params: {
        name: '',
        total: 0,
        pageNum: 1,
        pageSize: 10,
      },
    }
  },
  created() {
    this.getlist();
  },
  methods: {
    sumbit(){
      this.$refs['form'].validate((valid) => {
          if (valid) {
            console.log("人员信息",this.form)
            if(this.form.id){ // 存在id  就是更新
              console.log("更新数据")
              updateUser(this.form).then(res=>{
                if(res.code == 0){
                  this.dialogFormVisible = false
                  this.$message.success("修改成功！")
                  this.getlist()
                }
              })
            }else{
              console.log("添加数据")
              addUser(this.form).then(res=>{
                if(res.code == 0){
                  this.dialogFormVisible = false
                  this.$message.success("添加成功！")
                  this.getlist()
                }
              })
            }
          } else {
            console.log('error submit!!');
            return false;
          }
        });
    },
    searchclick(val){
      this.loading = true
      delete val.date
      for(let i in val){
        this.params[i] = val[i]
      }
      this.getlist()
    },
    zhiding(info){
      if(info.topContent == 1){
        this.settop('0',info.id,'取消置顶')
      }else{
        this.settop('1',info.id,'置顶')
      }
    },
    settop(num,id,word){
      top({id:id,type:num}).then(res=>{
        if(res.data ==1){
          this.$message.success(word+"成功！")
          this.getlist()
        }else{
          this.$message.error(word+"成功！")
        }
      })
    },
    tuijian(info){
      if(info.niceContent == 1){
        this.setnice('0',info.id,'取消推荐')
      }else{
        this.setnice('1',info.id,'推荐')
      }
    },
    setnice(num,id,word){
      nice({id:id,type:num}).then(res=>{
        if(res.data ==1){
          this.$message.success(word+"成功！")
          this.getlist()
        }else{
          this.$message.error(word+"成功！")
        }
      })
    },
    add() {
     this.dialogFormVisible = true
     this.form.name = ''
     this.form.userName = ''
    },
    updateHandle(row){
      this.dialogFormVisible = true
      this.form = row;
    },
    editcontent(row) {
      this.$router.push({
        name: 'addform',
        query:{ type:'edit', id:row.id}
      })
    },
    getlist() {
      queryPage(this.params).then((res) => {
        console.log("值班人员",res)
        if (res.code == 0) {
          this.loading = false
          this.tableData = res.data.rows.map(item=>{
            item.isTop = item.topContent==1?'是':'否'
            item.isNice = item.niceContent==1?'是':'否'
            return item
          })
          this.params.total =  res.data.total
        }
      });
    },
    handleCurrentChange(val) {
      this.params.pageNum = val;
      this.getlist()
    },
    handleSizeChange(val) {
      this.params.pageSize = val;
      this.getlist()
    },
    deleteRow(row) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let ids = [];
          ids.push(row.id);
          delUser(ids)
            .then((res) => {
              if (res.data == 1) {
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
                this.params.pageNum = 1;
                this.getlist();
              } else {
                this.$message.error("删除失败");
              }
            })
            .catch((err) => {
              console.log(err);
            });
        })
        .catch(() => { });
    },
  }
}
</script>
<style scoped>
@import "~@/assets/css/adminstyle.css";
</style>
